<template>
  <div class="box">
    <div class="nav">
      <ul class="location">
        <li>
          <Dropdown  placement="bottom-start">
            <a href="javascript:void(0)">
              <Icon type=" ios-location" class="icon"></Icon> {{city}}
            </a>
            <DropdownMenu slot="list">
              <div class="city">
                <p v-for="(items, index) in cityArr" :key="index">
                  <span v-for="(item, index) in items"  class="city-item" :key="index" @click="changeCity(item)">{{item}}</span>
                </p>
              </div>
            </DropdownMenu>
          </Dropdown>
        </li>
      </ul>
      <ul class="detail">

        <li v-if="hasLogin">
          <Dropdown>
            <p class="username-p">
              <Avatar class="person-icon" icon="person" size="small" /> <span class="username">{{username}} </span>
            </p>
          <DropdownMenu slot="list">
            <div class="my-page">
              <div class="my-info" @click="myInfo">
                <Icon type="home"></Icon>
                <p>我的主页</p>
              </div>
              <div class="sign-out" @click="signOutFun">
                <Icon type="log-out"></Icon>
                <p>退出登录</p>
              </div>
            </div>
          </DropdownMenu>
          </Dropdown>
        </li>
        <li v-else class="first" >
          你好，请<router-link to="/login">登录 <Icon type="person"></Icon></router-link> |<span class="text-color-red"><router-link to="/SignUp">免费注册 <Icon type="person-add"></Icon></router-link></span>
        </li>
        <li><router-link to="/Index">网站导航</router-link></li>
        <li><router-link to="/freeback">意见反馈</router-link></li>
        <li><router-link to="/">商城首页</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import store from '@/util/store';

import { mapState, mapActions } from 'vuex';
export default {
  name: "Header",

  data: function () {
    return {
      city: '珠海',
      cityArr: [
        ['北京', '上海', '天津', '重庆', '广州'],
        ['深圳', '河南', '辽宁', '吉林', '江苏'],
        ['江西', '四川', '海南', '贵州', '云南'],
        ['西藏', '陕西', '甘肃', '青海', '珠海']
      ],
      username: '',
      hasLogin: false,
    }
  },
  methods: {
    changeCity(city) {
      this.city = city;
    },
    myInfo() {
      this.$router.push('/Home');
    },
    signOutFun() {
      localStorage.setItem('islogin.lenove', 'no');
      this.hasLogin = false;
      localStorage.clear();
      this.$router.push('/index');
    },
  },
    mounted() {
      const that = this;
      const storage = localStorage;
      // 过期时间
      const expiredTime = Number(storage.getItem('expiredTime.lenove'));
      // 当前时间
      const current = (new Date()).getTime();
      // 刷新令牌
      const refreshToken = storage.getItem('refresh.lenove');
      // 用户名
      that.username = storage.getItem('username.lenove');

      // if(storage.getItem('islogin.lenove'))
      // {
      //   that.hasLogin = false;
      // }
      // else
      //   that.hasLogin = true;

      //初始 token 未过期
      if (expiredTime > current) {
        that.hasLogin = true;
      }
        // 初始 token 过期
      // 如果有刷新令牌则申请新的token
      else if (refreshToken !== null) {
        axios
          .post('/api/token/refresh/', {
            refresh: refreshToken,
          })
          .then(function (response) {
            const nextExpiredTime = 60000 + Date.parse(response.headers.date);

            storage.setItem('access.lenove', response.data.access);
            storage.setItem('expiredTime.lenove', nextExpiredTime);
            storage.removeItem('refresh.lenove');

            that.hasLogin = true;
          })
          .catch(function () {
            // .clear() 清空当前域名下所有的值
            storage.clear();
            that.hasLogin = false;
          })
      }
      // 无任何有效 token
      else {
        storage.clear();
        that.hasLogin = false;
      }
    },
  store
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 35px;
  background-color: #e3e4e5;
}
.nav {
  margin: 0% auto;
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.nav ul {
  list-style: none;
}
.nav li {
  float: left;
  font-size: 14px;
  line-height: 35px;
  margin-right: 15px;
  font-weight: bold;
}
.nav a {
  text-decoration: none;
  color: #999999;
  padding-left: 15px;
  border-left: 1px solid #ccc;
  cursor: pointer;
}
.location a {
  border-left: none;
}
.nav a:hover {
  color: #d9534f;
}
.location {
  color: #999999;
}
.icon {
  color: #d9534f;
}
.first {
  color: #999999;
}
.first a:first-child {
  padding-left: 3px;
  border-left: none;
}
.city {
  padding: 10px 15px;
}
.city-item {
  font-weight: bold;
  cursor: pointer;
  padding: 5px;
}
.city-item:hover {
  color: #d9534f;
}
.username-p {
  cursor: pointer;
}
.my-page {
  padding: 3px 5px;
  width: 180px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-page a {
  margin: 0px;
  padding: 0px;
  border: none;
}
.my-info {
  padding: 5px;
  width: 50%;
  height: 100%;
  text-align: center;
  cursor: pointer;
}
.my-info:hover {
  box-shadow: 0px 0px 5px #ccc;
}
.my-info i {
  font-size: 28px;
}
.my-info p {
  font-size: 12px;
}
.sign-out {
  padding: 5px;
  width: 50%;
  height: 100%;
  text-align: center;
  cursor: pointer;
}
.sign-out:hover {
  box-shadow: 0px 0px 5px #ccc;
}
.sign-out i {
  font-size: 28px;
}
.sign-out p {
  font-size: 12px;
}
</style>
